<template>
  <scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower">
    <!-- 轮播图开始 自动轮播autoplay 指示器indicator-dots 循环轮播 circular-->
    <view class="album_swiper">
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <image :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图结束 swiper默认高度150px image默认的宽度320px(已重置成100%),默认高度240px,因此需要把图片比例写到swiper的样式中 -->
    <!-- 图片比例 640/284 ===2.3 -->
    <!-- 列表开始 -->
    <view class="album_list">
      <navigator class="ablum_item" v-for="item in album" :key="item.id" :url="`/pages/album/index?id=${item.id}`">
        <view class="album_img">
            <image :src="item.cover" mode='aspectFill'></image>
        </view>
        <div class="album_info">
          <view class="album_name">{{item.name}}</view>
          <view class="album_desc">{{item.desc}}</view>
          <view class="album_btn">
            <view class="album_attention">
              关注
            </view>
          </view>
        </div>
      </navigator>
    </view>
    <!-- 列表结束 -->
  </scroll-view>
</template>

<script>

export default {
 
  data() {
    return {
      params: {
        limit: 30,
        order: "news",
        skip: 0
      },
      // 轮播图数组
      banner: [],
      // 列表数组
      album: [],
      // 是否还有分页数据
      hasMore:true
    };
  },
  mounted() {
    // 修改页面标题
    uni.setNavigationBarTitle({ title: "专辑" });
    this.getList();
  },
  methods: {
    // 获取专辑接口数据
    getList() {
      this.request({
        url: "https://service.picasso.adesk.com/v1/wallpaper/album",
        data: this.params
      }).then(res => {
        if(this.banner.length===0){
           this.banner = res.res.banner;
        }
        if(res.res.album.length===0){
          this.hasMore=false;
         uni.showToast({
          title:'没有数据了',
          icon:'none'
        })
          return
        }
        this.album=[...this.album,...res.res.album];
        
      });
    },
    // 上拉加载执行分页
    handleToLower(){
      if(this.hasMore){
        this.params.skip+=this.params.limit;
        this.getList();
      }else{
        uni.showToast({
          title:'没有数据了',
          icon:'none'
        })
      }
    }
  }
};
</script>

<style lang="scss">
.album_scroll_view{
  height: calc(100vh - 36px);
}
.album_swiper{
  swiper{
    // 宽度默认是750rpx 要按图片比例 640/284 ===2.3来计算
    height: calc(750rpx / 2.3);
    image{
      height: 100%;
    }
  }
}
.album_list {
  padding: 10rpx;
  .ablum_item {
    padding: 10rpx 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    .album_img {
      flex:1;
      padding: 10rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .album_info {
      flex:2;
      padding:0 10rpx;
      overflow: hidden;
      .album_name {
        font-size: 30rpx;
        color:#000;
        padding:10rpx 0;
      }

      .album_desc {
          padding:10rpx 0;
          font-size: 24rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }

      .album_btn {
        padding: 10rpx;
        display: flex;
        justify-content: flex-end;
        .album_attention {
          color:$color;
          border:1rpx solid $color;
          padding: 10rpx;
        }
      }
    }
  }
}
</style>